import { useState, useEffect } from 'react';
// @ts-ignore
import { Table, Space } from 'antd';
// @ts-ignore
import { Pagination } from 'antd';
import instance from '../../axios/index';
// 定义表格列
const columns = [
    {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
    },
    // 图片
    {
        title: '头像',
        dataIndex: 'img',
        key: 'img',
        render: (text: any) => <img src={text} alt="" style={{ width: '50px', height: '50px' }} />

    },
    {
        title: '级别',
        dataIndex: 'state',
        key: 'state',
    },
    {
        title: '主科室',
        dataIndex: 'department',
        key: 'department',
    },
    {
        title: '学校',
        dataIndex: 'nosocomium',
        key: 'nosocomium',
    },
    {
        title: '城市',
        dataIndex: 'city',
        key: 'city',
    },
    {
        title: '详细科室',
        dataIndex: 'administrativeOffice',
        key: 'administrativeOffice',
    },
    {
        title: '身份证',
        dataIndex: 'identitycard',
        key: 'identitycard',
    },

];

function Shop() {
    // 存储医生数据的状态
    const [doctorData, setDoctorData] = useState([]);
    // 存储总记录数的状态
    const [num, setNum] = useState(0);
    // 当前页码状态
    const [page, setPage] = useState(1);
    // 每页显示数量状态
    const [size, setSize] = useState(10);

    useEffect(() => {
        // 根据当前页码和每页显示数量构造请求数据
        let data = {
            page: page,
            size: size
        };
        // 发起获取医生数据的请求
        instance.post('/api/doctorall', data).then(res => {
            // 设置总记录数
            setNum(res.data.data.num);
            // 设置医生数据
            setDoctorData(res.data.data.data);
        })
    }, [page, size]);

    const onChangePage = (page: any, pageSize: any) => {
        console.log(page, pageSize);

        // 更新当前页码和每页显示数量状态
        setPage(page);
        setSize(pageSize);

        // 根据新的页码和每页显示数量构造请求数据
        let data = {
            page: page ,
            size: pageSize
        };
        // 发起获取新分页数据的请求
        instance.post('/api/doctorall', data).then(res => {
            // 设置总记录数
            setNum(res.data.data.num);
            // 设置医生数据
            setDoctorData(res.data.data.data);
        })
    }

    const isDarkTheme = localStorage.getItem('flag');
    console.log(isDarkTheme);

    return (
        <div style={{
            backgroundColor: isDarkTheme ? '#001529' : '#fff',
            color: isDarkTheme ? '#fff' : '#001529',
        }}>
            <Table style={{
                backgroundColor: isDarkTheme ? '#001529' : '#fff',
                color: isDarkTheme ? '#fff' : '#001529',
            }} rowKey="id" columns={columns} dataSource={doctorData}
                pagination={{
                    pageSize: size,
                    total: num,
                    showTotal: (total) => `Total ${total} items`,
                    onChange: onChangePage
                }}
            />
        </div>
    );
}

export default Shop;